<template>
  <ul>
    <li class="time-line" v-for="(one,key) in times" :key="key">
      <span class="bac">
        <time>
          {{one}}
        </time>
      </span>
      <div class="warpper">
        <slot  :item="items[key]" name="item">
        </slot>
      </div>
    </li>
  </ul>
</template>
<script>
  export default {
    name: 'TimeLineB',
    props: {
      items: {type: Array, default: function () { return [] }},
      timeKey: {type: String, default: 'time'}
    },
    computed: {
      times () {
        let times = []
        let now = new Date()
        let today = now.setHours(0, 0, 0, 0)
        let yestoday = new Date(today - 24 * 60 * 60 * 1000).setHours(0, 0, 0, 0)
        let years = now.getFullYear()
        this.items.forEach((item) => {
          let value = item[this.timeKey]
          if (value) {
            let dataTimeArr = value.split(' ')
            let day = dataTimeArr[0].split('-')
            day[1] = Number(day[1])
            day[2] = Number(day[2])
            let dayTimeArr = dataTimeArr[1].split(':')
            let dayTime = dayTimeArr[0] + ':' + dayTimeArr[1]
            let valueDate = new Date(value)
            let currentDay = valueDate.setHours(0, 0, 0, 0)
            let currentYear = valueDate.getFullYear()
            let time = ''
            // let day = new Date(value).toLocaleDateString().split('/')
            // let dayTime = new Date(value).toTimeString().substr(0, 5)
            if (today === currentDay) {
              time = this.$t('customer.today') + ' ' + dayTime
            } else if (yestoday === currentDay) {
              time = this.$t('customer.yesterday') + ' ' + dayTime
            } else if (currentYear === years) {
              time = `${day[1]}${this.$t('business.timeLine.month')}${day[2]}${this.$t('business.timeLine.day')} ${dayTime}`
            } else {
              time = `${day[0].substr(2)}${this.$t('business.timeLine.year')}${day[1]}${this.$t('business.timeLine.month')}${day[2]}${this.$t('business.timeLine.day')} ${dayTime}`
            }
            times.push(time)
          }
        })
        return times
      }
    },
    methods: {
    },
    data () {
      return {
      }
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../assets/common.styl"
  .time-line
    position relative
    padding 20px 0 20px 13px
    border-left 1px solid $c-border2
    &:last-child
      border-left-color #fff
    .bac
      font-size 12px
      line-height 16px
      position absolute
      width 135px
      padding-left 14px
      left 0
      top 0px
      margin-top -1px
      color $cf-gray4
      text-align left
      &:before
        content ""
        width 11px
        height 11px
        display inline-block
        position absolute
        top 1px
        left -7px
        border-radius 50%
        background-color $c-border2
        border 1px solid $cf-white
      time
        display inline-block
</style>
